<#include '../head.html'/>
<div style="padding: 0 20px">
	<input type="hidden" name="rolegroupid" id="rolegroupid" value="${rolegroupid}">
	<table class="layui-hide" id="roleTable" lay-filter="roleTable"></table>
</div>
<script type="text/html" id="toolbarDemo">
  	<div class="layui-btn-container">
    	<button class="layui-btn layui-btn-sm" lay-event="saveData">保存</button>
  	</div>
</script>
<script src="/statics/layui/layui.js"></script>
<script>
	layui.use('table', function(){
	  var table = layui.table;
	  var roles=${roles};
	  table.render({
	    elem: '#roleTable'
	    ,url:'/role/list.jhtml'
	    ,toolbar: '#toolbarDemo'
	    ,title: '用户数据表'
	    ,cols: [[
	      {type: 'checkbox', fixed: 'left'}
	      ,{field:'id', title:'ID', width:80, fixed: 'left', unresize: true, sort: true}
	      ,{field:'name', title:'权限名', width:120}
	      ,{fixed: 'right', width: 165, align:'center', toolbar: '#barDemo'}
	    ]]
	    ,page: false
	    ,limit:100
	    ,done: function(res, curr, count){
	    	//alert(res.data);
	    	var table_data=res.data;
	    	for(var i=0;i< res.data.length;i++){
                for (var j = 0; j < roles.length; j++) {
                    //数据id和要勾选的id相同时checkbox选中
                    if(res.data[i].id == roles[j].id)
                    {
                        //这里才是真正的有效勾选
                        res.data[i]["LAY_CHECKED"]='true';
                        //找到对应数据改变勾选样式，呈现出选中效果
                        var index= res.data[i]['LAY_TABLE_INDEX'];
                        $('.layui-table-fixed-l tr[data-index=' + index + '] input[type="checkbox"]').prop('checked', true);
                        $('.layui-table-fixed-l tr[data-index=' + index + '] input[type="checkbox"]').next().addClass('layui-form-checked');
                        
                    }
                }
            }
	    }
	  });
	  
	  //监听表格复选框选择
	  table.on('checkbox(roleTable)', function(obj){
	    console.log(obj)
	  });
	  //头工具栏事件
	  table.on('toolbar(roleTable)', function(obj){
	    var checkStatus = table.checkStatus(obj.config.id);
	    switch(obj.event){
	      case 'saveData':
	    	saveData();
	      break;
	      case 'getCheckLength':
	        var data = checkStatus.data;
	        layer.msg('选中了：'+ data.length + ' 个');
	      break;
	      case 'isAll':
	        layer.msg(checkStatus.isAll ? '全选': '未全选');
	      break;
	    };
	  });
	  function saveData(){
		var checkStatus = table.checkStatus('roleTable')
	      ,data = checkStatus.data;
		var roleids=[];
		for(var i in data){
			roleids.push(data[i].id);
		}
		$.ajax({  
		    type: "POST",  
		    url: "/rolegroup/saveRoles.jhtml",  
		    data: { "roleids":  roleids.join(","),"rolegroupid":$("#rolegroupid").val() },  
		    dataType: "json",  
		    success: function (data) {  
		    	if(data.state==0){
					layer.alert(
							data.message,
							{
								icon: 1,    // icon
								yes:function(){
									parent.location.reload();
								}
								
							}
					);
				}else{
					layer.alert(data.message);
				}
		    }  
		});
	  }
	});
	
	</script>
